<script setup></script>

<template>
	<div class="search-box">
		<div class="search-label">
			<label>
				<slot name="label" />
			</label>
		</div>
		<div class="search-content">
			<slot name="content" />
		</div>
		<div class="search-control">
			<slot name="control" />
		</div>
	</div>
</template>

<style scoped lang="less">
	.search-box {
		display: flex;
		& + .search-box {
			margin-top: 24px;
		}
		.search-label {
			width: 100px;
			text-align: right;
			label {
				display: inline-flex;
				height: 32px;
				line-height: 32px;
				font-size: 14px;
				font-family: -apple-system, BlinkMacSystemFont, "Segoe UI",
					Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif,
					"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
					"Noto Color Emoji";
			}
		}
		.search-content {
			flex-grow: 1;
		}
		.search-control {
			margin-left: 10px;
			width: fit-content;
		}
	}
</style>
